<template>
  <a-modal :open="open" :width="860" title="医保账户查询" centered :footer="null" @cancel="onCancel">
    <div class="overflow-auto" style="height: 60vh">
      <div class="flex items-center flex-1 overflow-hidden mt-4">
        <div class="w-12">
          <a-avatar :size="48" :src="avatarMan" />
        </div>
        <div class="flex-1 ml-4">
          <div class="flex mb-1">
            <div class="w-1/4 flex" style="width: 150px">
              <p class="mb-0 mr-2 font-bold">{{ resourceData.ybkResonse.xm }}</p>
              <p class="mb-0 mr-2 font-bold">{{ resourceData.ybkResonse.xb }}</p>
            </div>
            <LabelValue label="手机" label-class="font-bold" value-class="font-bold" :width="170" :value="resourceData.ybkResonse.lxdh" />
            <LabelValue label="医保待遇类别" label-class="font-bold" value-class="font-bold" :width="220" :value="resourceData.ybkResonse.dylb" />
            <LabelValue label="医保状态" label-class="font-bold" value-class="font-bold" :width="190" :value="resourceData.ybkResonse.ybzt" />
          </div>
          <div class="flex">
            <LabelValue label="社保卡号" label-class="font-bold" value-class="font-bold" :width="320" :value="resourceData.ybkResonse.kh" />
            <LabelValue label="记录册号" label-class="font-bold" value-class="font-bold" :width="220" :value="resourceData.ybkResonse.jlch" />
            <LabelValue label="医保办法" label-class="font-bold" value-class="font-bold" :width="190" :value="resourceData.ybkResonse.ybbf" />
          </div>
        </div>
      </div>
      <a-divider style="margin: 16px 0px 0px 0px; border-color: rgba(5, 5, 5, 0.2)" dashed />
      <div class="query-border flex flex-wrap mb-2">
        <LabelValue label="当年账户余额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.dnzhye.toString()" />
        <LabelValue label="历年账户余额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.lnzhye.toString()" />
        <LabelValue label="门诊自负段现金支付累计金额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.mzzfdxjzfljs.toString()" />
        <p class="w-full"></p>
        <LabelValue label="门诊自负段定额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.mzzfdde.toString()" />
        <LabelValue label="住院起线下支付累计金额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.zyzfxxzfljs.toString()" />
        <LabelValue label="住院自负段定额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.zyzfdde.toString()" />
        <p class="w-full"></p>
        <LabelValue label="统筹支付封顶线定额" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.tczffdxde.toString()" />
        <LabelValue label="起付线上封顶线下费用累计" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.qfxsfdxxfylj.toString()" />
      </div>
      <a-divider style="margin: 16px 0px 0px 0px; border-color: rgba(5, 5, 5, 0.2)" dashed />
      <div class="query-border flex flex-wrap mb-2">
        <LabelValue label="行政区域编号" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.xzqh" />
        <LabelValue label="行政区域名称" value-class="font-bold" :width="260" :value="resourceData.ybkResonse.xzqh" />
        <LabelValue label="结算平台" value-class="font-bold" :width="260" value="五期" />
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import avatarMan from '@/assets/images/avatar-man.png'

const emit = defineEmits(['update:open'])
defineProps({
  open: Boolean,
  resourceData: {
    type: Object,
    default: () => ({})
  }
})

const onCancel = () => {
  emit('update:open', false)
}
// watch(
//   () => props.open,
//   (val) => {}
// )
</script>
<style lang="less" scoped>
.query-title {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.query-border {
  margin-top: 20px;
  padding: 6px 10px;
  // border: 1px dashed rgba(5, 5, 5, 0.2);
}
</style>
